<template>
  <div :style="Background" class="Index">
    <!-- <stepmain/> -->
    <van-nav-bar title="设置" />
    <div class="mine-top">
      <van-image
        @click="onCenterClick"
        style="
          border: solid #fff 2px;
          box-shadow: 0px 0px 12px 0 rgb(0 0 0 / 8%);
        "
        round
        width="5rem"
        height="5rem"
        :src="avtorData"
        error-icon="user-circle-o"
      >
        <template v-slot:loading>
          <van-loading type="spinner" size="20" /> </template
      ></van-image>
      <div class="mine-top-user">
        <span
          style="
            font-weight: 600;
            font-size: 1.4rem;
            color: black;
           
            margin-top: 10px;
          "
          >{{ nickName }}</span
        >
        <div class="mine-top-user-detailList">
          <!-- <span style="color: black" @click="toFriendPage('')"
            >{{ deviceNum }} <span style="color: #606266">关注</span>
          </span>
          <span class="mine-top-user-detailList-spit">|</span>
          <span style="color: black" @click="toFriendPage('')"
            >{{ deviceNum }} <span style="color: #606266">粉丝</span></span
          >
          <span class="mine-top-user-detailList-spit">|</span> -->
          <span style="color: black"
            >{{ deviceNum }} <span style="color: #606266">设备数</span></span
          >
        </div>
      </div>
    </div>
    <div class="mine-mid">
      <!-- <van-uploader :after-read="afterRead"> -->
      <van-cell
        class="mine-mid-cell"
        title="意见反馈"
        size="large"
        is-link
        @click="onAdviseClick"
      />
      <van-cell
        class="mine-mid-cell"
        title="更换背景"
        size="large"
        is-link
        @click="changebg"
      />
      <!-- </van-uploader> -->
      <van-cell
        class="mine-mid-cell"
        title="检查更新"
        size="large"
        :value="'V' + this.$version"
        @click="update"
      />
    </div>
    <!-- <van-progress :percentage="progress" /> -->
    <div class="mine-bottom">
      <van-button round block type="info" @click="exit">退出登录</van-button>
    </div>
    <router-view></router-view>
  </div>
</template>
<script>
import { Dialog } from "vant";
import { Toast } from "vant";
export default {
  name: "mine",
  components: {},
  computed: {
    avtorData: {
      get() {
        return this.$store.state.userAvatar;
      },
      set(v) {
        // 使用vuex中的mutations中定义好的方法来改变
        this.$store.commit("saveUserAvatar", v);
      },
    },
    nickName: {
      get() {
        return this.$store.state.nickName;
      },
      set(v) {
        // 使用vuex中的mutations中定义好的方法来改变
        this.$store.commit("saveNickName", v);
      },
    },
  },
  data() {
    return {
      progress: 0,
      showPopover: false,
      // 通过 actions 属性来定义菜单选项
      actions: [{ text: "选项一" }, { text: "选项二" }, { text: "选项三" }],
      Background: "",
      fileList: "",
      deviceNum: this.$store.state.deviceNumber,
      defaultImg: require("@/assets/img/default_avatar.png"),
    };
  },
  // created: function () {
  //   //this.updateDevice()
  //   // this.mqttMsg()
  // },
  created: function () {
    this.avtorData =
      "http://121.5.58.100/avatar/" +
      localStorage.getItem("setUserID") +
      "_avatar.jpg?tempid=" +
      Math.random();

    // "http://121.5.58.100/avatar/" +
    // localStorage.getItem("setUserID") +
    // "_avatar.jpg?tempid=" +
    // Math.random();
    console.log(this.avtorData);
  },
  methods: {
    afterRead(file) {
      //localStorage.setItem("Background",file.content)
      this.resetSetItem("Background", file.content);
      // this.Background = {
      //   "background-image": "url(" + file.content + ")",
      // };
      console.log(this.Background);

      // 此时可以自行将文件上传至服务器
      //console.log(file);
    },
    toFriendPage(res) {
      this.$router.push({
        name: "friends",
        params: {
          tabIndex: res,
          routerType: "push",
        },
      });
    },
    onCenterClick() {
      this.$router.push({
        name: "center",
        params: {
          routerType: "push",
        },
      });
    },
    onAdviseClick() {
      this.$router.push({
        name: "advise",
        params: {
          routerType: "push",
        },
      });
    },
    changebg() {
      this.$router.push({
        name: "changebg",
        params: {
          routerType: "push",
        },
      });
    },
    update() {
      Toast.loading({
        duration: 0,
        message: "检查中...",
        forbidClick: true,
      });
      this.$http
        .get("http://121.5.58.100:8000/queryOTA", {
          params: {
            userAgent: navigator.userAgent,
            version: this.$version,
          },
          headers: {
            "Content-Type": "application/x-www-form-urlencoded",
          },
        })
        .then((result) => {
          Toast.clear();
          if (result.data.version > this.$version) {
            Dialog.confirm({
              title: "发现新版本 V" + result.data.version,
              confirmButtonText: "更新",
              message: result.data.content,
            })
              .then(() => {
                var self = this;
                // on confirm
                // window.location.href =
                //   "http://121.5.58.100/base-" + result.data.version + ".apk";

                var fileTransfer = new window.FileTransfer();
                // 上传进度
                fileTransfer.onprogress = function (progressEvent) {
                  if (progressEvent.lengthComputable) {
                    self.progress = (
                      (progressEvent.loaded / progressEvent.total) *
                      100
                    ).toFixed(0);
                    Toast({
                      message: "下载中：" + self.progress + "%",
                      position: "bottom",
                    });
                  } else {
                    this.progress = 0;
                    // loadingStatus.increment();
                  }
                };
                var uri = encodeURI(
                  "http://121.5.58.100/base-" + result.data.version + ".apk"
                );
                var fileURL = "cdvfile://localhost/temporary/tuner.apk";
                fileTransfer.download(
                  uri,
                  fileURL,
                  function (entry) {
                    alert("下载完成，点击确定开始安装" + entry.toURL());
                    cordova.plugins.fileOpener2.open(
                      "cdvfile://localhost/temporary/tuner.apk",
                      "application/vnd.android.package-archive"
                    );
                  },
                  function (error) {
                    alert(
                      "download error: " +
                        error.source +
                        error.target +
                        error.code
                    );
                  },
                  false,
                  {
                    headers: {
                      Authorization:
                        "Basic dGVzdHVzZXJuYW1lOnRlc3RwYXNzd29yZA==",
                    },
                  }
                );
              })
              .catch(() => {
                // on cancel
              });
          } else {
            Dialog.alert({
              message:
                "当前为最新版本V" +
                this.$version +
                "\n当前版本更新日志：\n" +
                result.data.content,
            });
          }
        });
    },

    exit() {
      localStorage.setItem("islogin", 0);
      this.$router.push({
        name: "login",
        params: {
          routerType: "login_out",
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.Index {
  background-color: transparent;
  height: 100%;
  overflow: hidden;
}
.mine-top {
  display: flex;
  flex-direction: column;
  padding: 20px;
  align-items: center;
  background-color: white;
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px) saturate(180%);
  border-radius: 20px;
  margin: 20px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  &-user {
    margin: auto;
    text-align: center;
    line-height: 35px;
    display: flex;
    flex-direction: column;
    align-items: center;
    &-detailList {
      font-size: 14px;
      display: flex;
      flex-direction: row;
      &-spit {
        margin: 0 10px 0 10px;
        color: darkgray;
      }
    }
  }
}
.mine-mid {
  margin: 20px;
  border-radius: 20px;
  z-index: 5;
  &-cell {
    margin: 0 0 10px 0;
    width: auto;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px) saturate(180%);
  }
}
.mine-bottom {
  margin: 20px;
  position: fixed;
  bottom: 50px;
  width: calc(100% - 40px);
}
.text {
  color: white;
  text-align: left;
  margin-left: 5vw;
  margin-bottom: 10vw;
}
</style>
